<template>
  <div class="project-page">
    <breadCrunmb
      imgUrl="assets/project/head.jpg"
      :pathNames="pathNames"
    ></breadCrunmb>

    <div class="project-content">
      <treeMenu
        class="products-tree"
        :expandAll="true"
        :treeData="treeData"
        title="工程分类"
        @clickNode="clickTree"
        nodeKey="id"
        :needDefaultExpandedKeys="true"
        :defaultProps="treeSet">
      </treeMenu>
      <div v-if="!weatherShow">
        <imageLists
          :imgs="imgs"
          title="工程展示"
          :choosedImg.sync="choosedProject"></imageLists>

        <el-pagination
          background
          :page-size="pageSize"
          layout="prev, pager, next"
          @current-change="pageChange"
          :total="listSize">
        </el-pagination>
      </div>

      <div v-else>
        <div class="child-head">
          <div class="child-back" @click="back"> << 返回</div>

          <div class="child-title">{{choosedProject.label}}</div>
        </div>
        <images-show
          :imagesShowDate="imagesShowDate"
          style="margin-top: 70px"/>
      </div>
    </div>

  </div>
</template>

<script>
import imageLists from '@/components/imageLists'
import breadCrunmb from '@/components/breadCrunmb'
import treeMenu from '@/components/TreeMenu'
import imagesShow from '@/components/imagesShow'
import { queryProjectType, getAllProjects, getOneProject, getProjectByType } from '@/request/api'
export default {
  name: 'projectShow',
  components: {
    imageLists,
    breadCrunmb,
    treeMenu,
    imagesShow
  },
  data () {
    return {
      imgs: [],
      pathNames: [
        {
          id: 1,
          pathUrl: '/index',
          pathName: '网站首页'
        },
        {
          id: 2,
          pathName: '工程展示'
        }
      ],
      img_front: 'http://backmanage.yuxjt.com/',
      treeSet: {
        id: 'id',
        label: 'type_name',
        children: 'type_childIds'
      },
      treeData: [],
      childTitle: '子页面标题',
      weatherShow: false,
      choosedProject: {},
      pageSize: 9,
      listSize: 0,
      currentPage: 1,
      allimgs: [],
      imagesShowDate: []
    }
  },
  mounted () {
    // 加载类型
    queryProjectType().then(res => {
      this.treeData = res
    })

    // 获取所有项目
    getAllProjects().then(res => {
      res.forEach((eachOne) => {
        let getProdcutData = {}
        getProdcutData.id = eachOne.id
        getProdcutData.label = eachOne.projec_name
        getProdcutData.url = this.img_front + eachOne.imgPath
        getProdcutData.goto = '/index'
        this.allimgs.push(getProdcutData)
      })

      // 计算分页
      let startIndex = (this.currentPage - 1) * this.pageSize
      let endIndex = this.currentPage * this.pageSize
      this.imgs = this.allimgs.slice(startIndex, endIndex)

      this.listSize = this.allimgs.length
    })

    // 接受页面跳转过来的参数
    let pid = this.$route.query.id
    console.log('ddd',pid)
    if (pid) {
      this.imagesShowDate = []
      this.weatherShow = true
      // 得到选中的项目id,根据id获取该项目的详情信息
      getOneProject({projectId: pid}).then(res => {
        res.imgs.forEach((one, i) => {
          let oneTemp = {}
          oneTemp.id = i + 1
          oneTemp.url = this.img_front + one.url_img
          this.imagesShowDate.push(oneTemp)
        })
        this.choosedProject.label = res.projec_name
      })
    }
  },
  watch: {
    choosedProject (val) {
      if (this.choosedProject.label) {
        this.imagesShowDate = []
        this.weatherShow = true
        // 得到选中的项目id,根据id获取该项目的详情信息
        getOneProject({projectId: val.id}).then(res => {
          res.imgs.forEach((one, i) => {
            let oneTemp = {}
            oneTemp.id = i + 1
            oneTemp.url = this.img_front + one.url_img
            this.imagesShowDate.push(oneTemp)
          })
        })
      } else {
        this.weatherShow = false
      }
    }
  },
  methods: {
    clickTree (data) {
      this.choosedProject = {}
      // 点击分类，切换图片
      getProjectByType({typeId: data.id}).then(res => {
        this.allimgs = []
        res.forEach((eachOne) => {
          let getProdcutData = {}
          getProdcutData.id = eachOne.id
          getProdcutData.label = eachOne.projec_name
          getProdcutData.url = this.img_front + eachOne.imgPath
          getProdcutData.goto = '/index'
          this.allimgs.push(getProdcutData)
        })
        let startIndex = (this.currentPage - 1) * this.pageSize
        let endIndex = this.currentPage * this.pageSize
        this.imgs = this.allimgs.slice(startIndex, endIndex)

        this.listSize = this.allimgs.length
      })
    },
    back () {
      this.choosedProject = {}
    },
    pageChange (val) {
      this.currentPage = val
      let startIndex = (this.currentPage - 1) * this.pageSize
      let endIndex = this.currentPage * this.pageSize
      this.imgs = this.allimgs.slice(startIndex, endIndex)
    }
  }
}
</script>

<style lang="scss">
  .project-page {
    width: 100%;
    margin-bottom: 20px;
    .project-head {

    }

    .project-content {
      margin-top: 15px;
      display: grid;
      grid-template-columns: 300px 954px;
      grid-gap: 10px;
      justify-content: center;
      align-content: center;

      .project-tree {
        .products-tree {
          height: 800px;
        }
      }
      .el-pagination {
        margin-top: 15px;
        text-align: center;
      }

      .child-head {

        .child-back {
          float: left;
          text-decoration: underline;
          cursor: pointer;

          &:hover {
            color: #f3923d;
          }
        }
        .child-title {
          float: left;
          text-align: center;
          font-size: 25px;
          padding: 10px;
          background-color: #f3923d;
          width: 380px;
          margin-left: 200px;
          color: #ffffff;
        }
      }
    }
  }
</style>
